<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
</head>

<body>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.handlerSubmit = this.handlerSubmit.bind(this)
        }

        state = {
            usr: '',
            pwd: ''
        }

        handlerSubmit (event) {
            event.preventDefault()
            const usr = this.usrInput.value
            const { pwd } = this.state
            alert(`用户名:${usr},密码${pwd}`)
            this.setState({ usr })
        }

        handlerChange = (event) => {
            const pwd = event.target.value;
            this.setState({ pwd })
        }

        render() {
            return (
                <form action='/test' onSubmit={this.handleSubmit} >
                    用户名:<input type="text" ref={input => this.usrInput = input} />
                    密 码:<input type="password" onChange={this.handlerChange} />
                    <input type="submit" value='登录' />
                </form>
            )
        }
    }


    ReactDOM.render(<App />, document.getElementById('demo1'))
</script>
</body>

</html>
